/**
 * ChartShow
 * 图表展示页面
 */
import React, { Component } from 'react';
import { Grid } from 'semantic-ui-react';
import BusiCrumb from '../../../menu/crumb/BusiCrumb';
import Chart from 'react-apexcharts';
import faker from 'faker';

class ChartShow extends Component{

    constructor() {
        super();
        this.state = {
            options: {
                xaxis: {
                    categories: [faker.address.country(), faker.address.country(), faker.address.country(), faker.address.country(), faker.address.country(), faker.address.country()]
                },
                dataLabels: {
                    enabled: true,
                }
            },
            series: [{
                name: 'series-1',
                data: [faker.finance.amount(), faker.finance.amount(), faker.finance.amount(), faker.finance.amount(), faker.finance.amount(), faker.finance.amount()]
            }]
        }
    }

    render() {
        return (
            <Grid stackable>
                <Grid.Row>
                    <Grid.Column>
                        <BusiCrumb></BusiCrumb>
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Grid.Column width={8}>
                        <Chart options={this.state.options} series={this.state.series} type="bar" width={'100%'} height={320} />
                    </Grid.Column>
                    <Grid.Column width={8}>
                        <Chart options={this.state.options} series={this.state.series} type="line" width={'100%'} height={320} />
                    </Grid.Column>
                    <Grid.Column width={8}>
                        <Chart options={this.state.options} series={this.state.series} type="area" width={'100%'} height={320} />
                    </Grid.Column>
                    <Grid.Column width={8}>
                        <Chart options={this.state.options} series={this.state.series} type="scatter" width={'100%'} height={320} />
                    </Grid.Column>
                </Grid.Row>
            </Grid>            
        );
    }
}
export default ChartShow;